<script setup>
import BannerProduct from '../components/BannerProduct.vue';
import FullScreen from '../components/FullScreen.vue';
import Temp from '../components/Temp.vue';

defineProps({
    data:{
        type:Object,
        requred:true,
        default(){
            return [
                {id:1, title:'产品型号',infor:'AT(E)、GT(E)、AW(S)'},
                {id:2, title:'供气压力',infor:'双作用式:3~8bar 单作用式:4~8bar'},
                {id:3, title:'结构',infor:'旋转角度型'},
                {id:4, title:'尺寸标准',infor:'IS O5211、DIV3337、VDI/VDE3845'},
                {id:5, title:'缸体材质',infor:'铝合金'},
                {id:6, title:'缸体活塞和密封',infor:'压铸铝合金和氟橡胶 、丁腈橡胶'},
                {id:7, title:'控制方式',infor:'开关型、调节性'},
                {id:8, title:'作用方式',infor:'双作用 、单作用(弹簧复位)'},
                {id:9, title:'附件选择',infor:'电磁阀、定位器、限位开关、气源处理三联件、气动机构等'},
            ]
        }
    }
})

</script>

<template>
  <Temp lit=[] nobg=true>
    <FullScreen>
      <BannerProduct></BannerProduct>
    </FullScreen>
    <FullScreen>
        <div class="w-full h-auto self-center bg-no-repeat mobile:px-6">
            <div class="flex mb-[80px] mobile:mb-4 mobile:hidden">
                <span class="wen-index-title">产品范围</span>
            </div>
            <div class="w-full grid grid-cols-3 grid-flow-row mobile:grid-cols-2 ">
                <div class="w-full border-l-4 border-l border-dominant px-10 mb-[64px] mobile:mb-6 mobile:px-2 mobile:border-l-2 wow animate__animated animate__pushOnRight timing" v-for="(item, index) in data" :key="index">
                    <h3 class="text-2xl font-medium mobile:text-base">{{item.title}}</h3>
                    <p class="py-3 text-gray2 h-20 mobile:text-xs mobile:h-16">{{item.infor}}</p>
                </div>
            </div>
        </div>
    </FullScreen>
  </Temp>
</template>